<template>
	<view class="my_add_path">
		<view class="path-item Column">
			<view class="left">设备号<span class="biXuan">*</span></view>

			<view class="flex-row items-center">
				<input class="input" id="frist-input" type="text" :value="pathObj.deviceSn" placeholder="请输入设备号"
					data-pathObj="deviceSn" @input="input" />

				<view class="" @click="handleScanQRCode">
					<u-icon name="scan" color="#1a1a1a" size="32"></u-icon>
				</view>
			</view>
		</view>

		<view class="path-item Column">
			<view class="left">设备名称<span class="biXuan">*</span></view>

			<view class="flex-row items-center">
				<input class="input" id="frist-input" type="text" :value="pathObj.deviceName" placeholder="请输入设备名称"
					data-pathObj="deviceName" @input="input" />
			</view>
		</view>
		<!-- <view class="path-item Row">
			<view class="left">设备名称<span class="biXuan">*</span></view>
			<input class="input" type="number" placeholder="请输入设备名称" data-pathObj="deviceName" @input="input" />
		</view> -->
		<view class="path-item Row">
			<view class="left">设备备注</view>
			<input class="input" type="text" placeholder="请输入设备备注" data-pathObj="deviceNote" @input="input" />
		</view>
		<view class="path-item Row">
			<view class="left">装机地址</view>
			<input class="input" type="text" placeholder="请输入装机地址" :value="pathObj.areaName" data-pathObj="areaName"
				@input="input" />
		</view>
		<view class="path-item Row">
			<view class="left">承诺带宽</view>
			<input class="input" type="text" placeholder="请输入承诺带宽" data-pathObj="promiseBandwidth" @input="input" />
		</view>

		<!-- 选择收货地址的盒子 -->
		<view class="addressChoose Row">
			<button style="background: #0056FF;margin: 0 auto;" type="primary" size="mini" class="btn"
				@click="addAddress">{{type == "Edit" ? "编辑设备" :  "添加设备"}}</button>
		</view>
	</view>
</template>

<script>
	import {
		apiAddBindDevice,
		apiDeviceEdit
	} from '@/api/device.js';

	export default {
		data() {
			return {
				pathObj: {
					deviceSn: '', // string	是	设备号
					deviceName: '', // string	否	设备名称
					deviceNote: '', // string	否	设备备注
					areaName: '', // string	否	装机地址
					promiseBandwidth: '', // string	否	承诺带宽
				},

				type: '',
			};
		},
		onLoad(options) {
			if (options) {
				this.type = options.type;
				this.pathObj.deviceSn = options.deviceSn;
				this.pathObj.deviceName = options.deviceName;
			}
		},
		methods: {
			input(e) {
				const val = e.detail.value.trim();
				const name = e.currentTarget.dataset.pathobj;
				this.pathObj[name] = val;
			},

			handleScanQRCode() {
				uni.scanCode({
					success: async (res) => {
						if (res.result) {
							this.pathObj.deviceSn = res.result;
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},

			addAddress() {
				let that = this;
				if (!that.pathObj.deviceSn) return uni.$u.toast("请输入设备号");
				if (!that.pathObj.deviceName) return uni.$u.toast("请输入设备名称");

				const Params = {
					deviceSn: that.pathObj.deviceSn, // string	是	设备号
					deviceName: that.pathObj.deviceName, // string	否	设备名称
					deviceNote: that.pathObj.deviceNote, // string	否	设备备注
					areaName: that.pathObj.areaName, // string	否	装机地址
					promiseBandwidth: that.pathObj.promiseBandwidth, // string	否	承诺带宽
				}
				const apiCall = that.type === 'Edit' ? apiDeviceEdit : apiAddBindDevice;

				apiCall(Params)
					.then(res => {
						if (res.code == 0) {
							uni.$u.toast(res.msg);
							return;
						}
						uni.$u.toast("操作成功");
						setTimeout(function() {
							uni.navigateBack();
							uni.$emit('deviceList', {
								page: 1
							})
						}, 600)
					}).catch(err => console.log(err))
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
	}

	.my_add_path {
		// background-color: #fff;
		// padding: 24rpx;

		.path-item:nth-child(2) {
			margin-bottom: 32rpx;
			padding: 16rpx 24rpx 32rpx;
		}

		.path-item:nth-child(3) {
			padding: 32rpx 24rpx 16rpx;
		}

		.path-item:nth-child(5) {
			padding: 16rpx 24rpx 32rpx;
		}

		.path-item:first-child .path-item:nth-child(2) {
			padding: 16rpx 24rpx 32rpx;
		}

		.path-item {
			justify-content: space-between;
			// padding: 16rpx 0;
			background-color: #fff;
			padding: 16rpx 24rpx;


			.biXuan {
				color: red;
				padding-left: 4px;
			}

			.left {
				width: 24%;
				display: flex;
			}

			#frist-input {
				width: 94%;
				border-radius: 0;
				background-color: #f6f5fb;
				border-bottom: 1px solid #888888;
				background-color: #fff;
				margin: 10px 0 0 0;
			}

			.input {
				justify-content: space-around;
				width: 72%;
				color: #888888;
				font-size: 15px;
				border-radius: 10rpx;
				background-color: #f6f5fb;
				padding: 20rpx;

				.uni-input {
					margin-left: 16rpx;
				}
			}
		}

		.addressChoose {
			z-index: 3;
			width: 96.4%;
			background-color: #fff;
			padding: 20rpx;
			position: fixed;
			left: 0;
			bottom: 0;

			.btn {
				width: 94%;
				font-size: 30rpx;
				border: none;
				border-radius: 12rpx;
				padding: 6rpx 0;
			}
		}
	}
</style>